<template>
  <a-modal
    title="反执行"
    width="50%"
    :visible="visible"
    :maskClosable="false"
    @ok="handleSubmit"
    @cancel="handleCancel">
    
    <a-form-model ref="ruleForm" :model="form" :rules="rules">
      
      
      <a-form-model-item
        label="反执行原因"
        prop="reason"
      >
        <a-input class="w-full" :maxLength="200" v-model="form.reason" placeholder="请输入"/>
      </a-form-model-item>
    
    </a-form-model>
  </a-modal>
</template>


<script lang="ts">
import {Vue, Component, Emit, Ref} from "vue-property-decorator";

import {
  emsPlanOrderAdd,
} from "@/api/modular/main/emsordermaterial/emsOrderMaterialManage";
import {debounce} from "xijs";

@Component
export default class ProgressReverseExecuteModal extends Vue {
  @Ref() readonly ruleForm!: any
  
  @Emit()
  handleOk() {
  
  }
  
  visible = false
  confirmLoading = false
  
  form = {
    orderId: '',
    reason: '',
  }
  rules = {
    reason: [
      {required: true, message: '请输入反执行原因', trigger: 'blur'},
    ],
  }
  
  show(record) {
    this.form.orderId = record.orderId
    this.visible = true
  }
  
  
  handleSubmit = debounce(this.submit, 1000)
  
  
  submit() {
    console.log(this.$refs)
    console.log(this.ruleForm)
    this.ruleForm?.validate?.(valid => {
      if (valid) {
        const {orderId, reason} = this.form
        let params = {
          // 订单类型 1退库 2返执行
          orderType: 2,
          sourceOrderId: orderId,
          reason: reason,
        }
        emsPlanOrderAdd(params).then(res => {
          //@ts-ignore
          if (res.success) {
            this.$message.info('反执行成功')
            this.handleCancel()
            this.handleOk()
            
          } else {
            //@ts-ignore
            this.$message.error('反执行失败：' + res.message)
          }
        })
      } else {
        console.log('error submit!!');
        return false;
      }
    });
    
  }
  
  handleCancel() {
    this.visible = false
    this.ruleForm?.resetFields()
    
  }
  
}
</script>


<style scoped lang="less">
/deep/ .ant-form-item {
  display: flex !important;
  
  .ant-form-item-control-wrapper {
    flex: 1;
  }
}
</style>